<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02_元素属性操作</title>
		<!-- 元素属性操作： 元素 固定属性 附加属性
		                       固定属性 <a href="#"></a>
							   附加属性<input type="radio" checked>
		      attr()           必须有参--1个参数，功能：获取匹配元素集合中第一个元素的指定属性值
			                                     理解：通过属性获取属性值
												 语法：attr("属性")
			                            2个参数，功能：【设置】匹配元素集合中所有元素的指定属性值
										        理解：通过属性和属性值 设置元素
												语法：attr("属性","属性值")
			  removeAttr()              有参----功能：移除匹配元素集合中所有元素的指定属性
			                                    理解：移除元素--元素效果消失
			  
			  
			  prop()
			  removeProp()
			  -->
			  <script src="../js/jquery-1.11.1.js"></script>
			  
	</head>
	<body>
		<!-- img 1.gif 图片引入 三个按钮 id="getAttrBtn"     获取属性
		                                id="setAttrBtn"     设置属性
										id="removeAttrBtn"  移除属性
			div id="output"  显示文本
										-->
		<h1>attr()函数与removeAttr()函数使用</h1>
		<img src="../img/1.gif" alt="1"  id="myImg"/>
		<br />
		<button id="getAttrBtn">获取属性</button>
		<button id="setAttrBtn">设置属性</button>
		<button id="removeAttrBtn">移除属性</button>
		<div id="output"></div>
		<h2>练习：attr()函数</h2>
		<button class="gan">点击1</button>
		<button class="gbn">点击2</button>
		<button class="gcn">点击3</button>
		<a href="../" target="_blank">百度一下</a>
		<video src="oceans-clip.mp4" controls></video>
		<div id="out"></div>
		<!-- 通过jq实现功能：点击按钮1，百度一下，实现真实页面跳转效果
		     通过jq实现功能：点击按钮2，百度一下，实现下载功能
			 通过jq实现功能：点击按钮3，百度一下，实现视频播放器效果,下面文字提示：上分是个视频播放器-->
    <script>
		//功能1
		$(".gan").click(function(){
			$("a").attr("href","http://www.baidu.com")
		});
		//功能2
		$(".gbn").click(function(){
			$("a").attr("href","../jquery-1.11.1.zip")
		});
		//功能3
		$(".gbn").click(function(){
			$("video").attr("autoplay","autoplay")
			$("out").text("上方是个视频播放器")
		});
		
		
		
		// 抓到 getAttrBtn 按钮  --点击--img图片元素的attr("src")属性【变量接收】
		//                     output显示文本：img的src路径是:+变量
		$("#getAttrBtn").click(function(){
			//通过元素固定属性名，获取到属性值
			var myImg=$("#myImg").attr("src");
			$("#output").text("img的src路径是："+myImg);
		});
		//参考上述代码：实现图片切换
		//$("#myImg").attr("src","../img/2.gif");
		$("#setAttrBtn").click(function(){
			//通过元素固定属性名，获取到属性值
			$("#myImg").attr("src","../img/2.gif");
			$("#output").text("img的src路径是:../img/2.gif");
		});
		//移除属性   --img图片属性 src
		$("#removeAttrBtn").click(function(){
			$("#myImg").removeAttr("src");
			$("#output").text("图片元素的src属性已移除");
		});
		
	</script>
	</body>
</html>